<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-size: 12px;
        }
        .tag_title{
            font-weight: bold;
            color:red;
        }
        .text_big_demo{
            line-height:2em;
            background-color: bisque;
            font-size:5em;
            vertical-align: top;
        }
        .text_small_demo{
            font-size:1em;
            background-color:aqua;
            line-height: 1.5em;
            margin-left:10px;
            margin-right: 10px;
        }
        a:link{     /*未触发前的状态*/
            color:green;
        }
        a:visited{  /*触发后的状态*/
            color:#97efff;
        }
        a:hover{    /*鼠标悬浮时状态*/
            color:crimson;
        }
        a:active{   /*点击瞬间的状态*/
            color:yellow;
        }
    </style>
    <script>
    function init(){
        document.getElementById("aBtn").addEventListener("click",(event)=>{
            alert("单击了a标签");
            event.preventDefault();
        },false);
    }
    window.addEventListener("load",init,false);
    </script>
</head>
<body>
        <span class="tag_title">&lt;small&gt;标签举例</span>
        <h1>重大优惠<small>具体事项见店内海报</small></h1>
        <hr>
        <span class="tag_title">各种标签举例</span><br>
        商品：<data value="ISBN:978-8-765-45378-8"><cite>三体三部曲</cite><small>&lt;I部、II部、III部&gt;</small></data>
        原价：<s>￥146</s>&nbsp;现价：￥78&nbsp;
        出版时间:<time datetime="2015-5-9">2015-5-9</time><br>
        <hr>
        <span class="tag_title">&lt;q&gt;标签举例</span><br>
        <span style="line-height: 40px;border:1px solid #ccc;vertical-align:text-bottom">我还会回来的——<q>灰太狼</q></span><br>
        <hr>
        <span class="tag_title">&lt;dfn&gt;标签及&lt;abbr&gt;标签举例：</span><br>
        <dfn>正十七边形尺规作图问题</dfn>以下简称为<abbr>作图问题</abbr><br>
        <abbr>DNA</abbr>(<dfn>脱氧核糖核酸</dfn>)<br>
        <hr>
        <code>let value=document.getElementById("btn_register");</code><br>
        <var>n</var> <var>n</var>-2<br>
        <bdo dir="rtl">文本的方向</bdo>是不一样的<br>
        <mark>我</mark>比较特殊<br>
        <ruby>OJ<rp><rt>(Orange Juice)</rt></rp></ruby><br>
        <ruby>汉<rp><rt>(han)</rt></rp></ruby><ruby>语<rp><rt>(yu)</rt></rp></ruby><br>
        <p>
        <a href="#">
            北斗七星高，
            单于夜遁逃。
            欲将轻骑逐，
            大雪满弓刀。</a>
        </p>
        <a href="tableDemo.html" id="aBtn">转向tableDemo.html</a>
        <span class="tag_title">行内元素举例</span><br>
        <span class="text_small_demo">Abe文本字符<br>文本字符Abe</span><br>
        <span class="text_big_demo">文本字符Abe<br>Abe文本字符</span>标准文字<br>

        位置
</body>
</html>